<template>
	<view class="picker-box" v-if="visible">
		<view class="select-bar">
			<v-select-box class="select-box" @ck="handleClick(1)" :inputvalue="startTime"></v-select-box>
			<!-- <text>至</text> -->
			<!-- <v-select-box class="select-box" @ck="handleClick(2)" :inputvalue="endTime"></v-select-box> -->
		</view>
		<view class="choess-btn">
			<view class="btn-cr" @click="sureSubmit">确定</view>
			<view @click="reset">重置</view>
		</view>	
		<view class="picker-x" v-if="dvisible" >
			<view class="picker-head">
				<view class="picker-head-tip">请选择时间</view>
				<view class="picker-column-head">
					<text>年</text>
					<text>月</text>
					<text>日</text>
				</view>
			</view>
			<!-- 请选择时间 -->
			<picker-view class="date-picker-view" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
				<picker-view-column>
					<view class="pick-item" v-for="(item,index) in years" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="pick-item" v-for="(item,index) in months" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="pick-item" v-for="(item,index) in days" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
			<view class="btn-pick-comfirm" @click="comfirmDate"><text class="confirm">完成</text></view>		
		</view>
	</view>
</template>

<script>
	import selectbox from './select-box.vue'
	export default {
		props:{
			visible: {
				type: Boolean,
				default: false
			}
		},
		data () {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				dvisible: false,
				startTime: '',
				endTime: '',
				cur_dvisible: -1,
				/**
				 * 解决动态设置indicator-style不生效的问题
				 */
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/85))}px;`
			}
		},
		methods:{
			handleClick (idx) {
				// console.log(456)
				this.dvisible = !!(this.cur_dvisible^idx^!this.dvisible)
				this.cur_dvisible = idx;
			},
			bindChange (e) {
			    const val = e.detail.value
			    this.year = this.years[val[0]]
			    this.month = this.months[val[1]]
			    this.day = this.days[val[2]]
			},
			// 完成
			comfirmDate(){
				var cd = this.cur_dvisible, date = `${this.year}-${this.month}-${this.day}`;
				// console.log(date,cd)
				cd == 1 ? (this.startTime = date) : cd == 2 ? (this.endTime = date) :0;
				this.dvisible = !1
				// 将选择的时间和索引传递给父组件
				this.$emit('selectTime', {
					time: date,
					time_index: cd
				})
			},
			
			// 确定
			sureSubmit() {
				this.$emit('sureSubmit')
			},
			
			// 重置
			reset() {
				this.value = [9999, this.month - 1, this.day - 1]
				this.startTime = ''
				this.endTime = ''
				// this.time = `${year}-${month}-${day}` 
				// 由于是重置，因此不要传递时间过去，默认拿所有
				this.$emit('selectTime', {}) 
			}
		},
		components:{
			vSelectBox: selectbox
		}
	}
</script>

<style scoped>
	picker-view { width: 100%; height: 600upx; margin-top:20upx;}
	.picker-x{
		position: fixed;
		margin-top: -68upx;
		left: 0;
		right: 0;
		background: #FFF;
	}
	.pick-item {line-height: 90upx; text-align: center;}
	.picker-box{width: 100%; overflow: hidden; background: #FFFFFF; transition: all 0.2 ease;box-shadow: 0 4upx 6upx #e6e6e6; z-index: 101; position: absolute;}
	.picker-box .select-bar{display: inline-flex; justify-content: space-between;padding-bottom: 20upx;width:100%;}
	.select-bar text{align-items: center;display: flex;padding-top: 20upx;}
	.select-bar .select-box{padding: 20upx 30upx 0;width:100%;}
	.picker-box .picker-head{width: inherit; text-align: center;}
	.picker-head .picker-head-tip{font-size: 30upx; font-weight:400; line-height: 52upx; color: #999;}
	.picker-box .picker-column-head{display: inline-flex; width: 100%; justify-content: space-around;font-size:16px;}
	.picker-box .picker-column-head text{font-family:Source Han Sans CN; font-weight:400; line-height: 60upx; color: #333;}
	.picker-box .btn-pick-comfirm{width: inherit; text-align: center; margin: 6upx 0;}
	.picker-box .btn-pick-comfirm text{font-size: 30upx; font-family:Source Han Sans CN; font-weight:400; line-height:26px; color: #fe9900;}
	.picker-box .date-picker-view {height: 260upx; margin-top: 0;}
	.choess-btn{padding: 4upx 0 20upx 0;display: flex;justify-content: space-around;}
	.btn-cr{color: #fe9900;}
	.confirm{padding: 20upx;}
</style>
